import React, { useState,useEffect } from 'react';  
import { Table, Button, Modal, Space ,Form,Alert,message,Row,Col, Card} from 'antd';  
import { ExclamationCircleOutlined } from '@ant-design/icons';  
import {useTranslation} from 'react-i18next'
import { createReport,editProduct,separatedFm,addFm,editFm,separatedFix,separatedCreateReport,subjectTestResult,updateSubjectTestResult,mixedfm,mixedFix,mixedCreateReport,getRmInciResult,saveSafetyRmInciResult,batchSaveRmInciResult,updateDataResult,uploadRemark,uploadRemarkUpdate,delRemark,refreshResult} from "@/api/modules/jhreport";
import FullscreenLoading from '@/components/FullscreenLoading';
import './table.css'; // 引入你的 CSS 文件
import {download} from '@/utils/request';
const Step3 = ({ formData,onUploadSuccess }) => {  
  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);  
  const [rowIndex, setRowIndex] = useState(null);  
  const [columnIndex, setColumnIndex] = useState(null);  
  const [modalValue, setModalValue] = useState(null);  
  const [tableData, setTableData] = useState([]);
  const [step3Data, setstep3Data] = useState(null)
  const [errorInfo, setErrorInfo] = useState({  
    composition: [], // 初始化为空数组  
    rows: [],        // 初始化为空数组  
    percentage: 0,   // 初始化为数字0  
  });  
  const [loading, setLoading] = useState(false); 

  useEffect(()=>{
    getData()
  },[])

  const getData = async () => { //formData
      console.log(formData,'table')
      setstep3Data(formData)
      setTableData(formData.fmCheckInciList)
    }


    const columns = formData.population.includes('儿') ? [  
      {  
        title: 'INCI US',  
        dataIndex: 'inciUs',  
        key: 'inciUs',  
        width: 140,  
        ellipsis: true, // 如果内容过长，则显示省略号  
        tooltip: true, // 显示工具提示，当内容过长时  
      },  
      {  
        title: 'INCI CN',  
        dataIndex: 'inciCn',  
        key: 'inciCn',  
        width: 140,  
        ellipsis: true,  
        tooltip: true,  
      },  
      {  
        title: 'Conc.',  
        dataIndex: 'percentage',  
        key: 'percentage',  
        minWidth: 80,  
        ellipsis: true,  
        tooltip: true,  
      },  
      {  
        title: 'China STSC (2015 ver)',  
        dataIndex: 'law2015',  
        key: 'law2015',  
        minWidth: 130,  
        ellipsis: true,  
        tooltip: true,  
        render: (text, record) => {  
          // 根据 cirColor 设置背景色  
          const style = {  
            backgroundColor: record.law2015Colour, // 直接使用 cirColor 的值作为背景色  
            // 如果你想添加更多的内联样式，可以在这里继续添加  
          };  
      
          // 返回带有样式的元素  
          return (  
            <div style={style}>  
              {text}  
            </div>  
          );  
        },  
      },  
      {  
        title: 'Authority conclusion (CIR-Baby product)',  
        dataIndex: 'babyCir',  
        key: 'babyCir',  
        minWidth: 90,  
        render: (text, record) => {  
          // 假设 checkData.population 是从某个地方获取的，并且在这个渲染函数中可用  
          // 如果 checkData.population 包含 '儿'，则显示这一列
          // 根据 cirColor 设置背景色  
          const style = {  
            backgroundColor: record.babyCirColour, // 直接使用 cirColor 的值作为背景色  
            // 如果你想添加更多的内联样式，可以在这里继续添加  
          };  
          if (step3Data.population.includes('儿')) {  
            return (  
              <div style={style}>  
                {text}  
              </div>  
            );     
          }  
          return null; // 或者你可以返回一个占位符，如 '-'  
        },  
        ellipsis: true,  
        tooltip: true,  
      },  
      {  
        title: 'Authority conclusion (CIR-Overall)',  
        dataIndex: 'cir',  
        key: 'cir',  
        minWidth: 130,  
        ellipsis: true,  
        tooltip: true,  
        render: (text, record) => {  
          // 根据 cirColor 设置背景色  
          const style = {  
            backgroundColor: record.cirColour, // 直接使用 cirColor 的值作为背景色  
            // 如果你想添加更多的内联样式，可以在这里继续添加  
          };  
      
          // 返回带有样式的元素  
          return (  
            <div style={style}>  
              {text}  
            </div>  
          );  
        },  
      },  
      // ... 其他列定义（cir, subject, supplier, riskLevel）与上述类似  
      {  
        title: 'Safety evaluation procedure- full toxicological endpoints',  
        dataIndex: 'subject',  
        key: 'subject',  
        minWidth: 130,  
        ellipsis: true,  
        tooltip: true,  
        render: (text, record) => {  
          // 根据 cirColor 设置背景色  
          const style = {  
            backgroundColor: record.subjectColour, // 直接使用 cirColor 的值作为背景色  
            // 如果你想添加更多的内联样式，可以在这里继续添加  
          };  
      
          // 返回带有样式的元素  
          return (  
            <div style={style}>  
              {text}  
            </div>  
          );  
        },  
      }, 
      {  
        title: 'Supplier information- safety assessment related',  
        dataIndex: 'supplier',  
        key: 'supplier',  
        minWidth: 130,  
        ellipsis: true,  
        tooltip: true,  
      }, 
      {  
        title: 'Risk level',  
        dataIndex: 'riskLevel',  
        key: 'riskLevel',  
        minWidth: 130,  
        ellipsis: true,  
        tooltip: true,  
        render: (text, record) => {  
          // 根据 cirColor 设置背景色  
          const style = {  
            backgroundColor: record.riskLevelColour, // 直接使用 cirColor 的值作为背景色  
            // 如果你想添加更多的内联样式，可以在这里继续添加  
          };  
      
          // 返回带有样式的元素  
          return (  
            <div style={style}>  
              {text}  
            </div>  
          );  
        },  
      },  
    ] : [  
      {  
        title: 'INCI US',  
        dataIndex: 'inciUs',  
        key: 'inciUs',  
        width: 140,  
        ellipsis: true, // 如果内容过长，则显示省略号  
        tooltip: true, // 显示工具提示，当内容过长时  
      },  
      {  
        title: 'INCI CN',  
        dataIndex: 'inciCn',  
        key: 'inciCn',  
        width: 140,  
        ellipsis: true,  
        tooltip: true,  
      },  
      {  
        title: 'Conc.',  
        dataIndex: 'percentage',  
        key: 'percentage',  
        minWidth: 80,  
        ellipsis: true,  
        tooltip: true,  
      },  
      {  
        title: 'China STSC (2015 ver)',  
        dataIndex: 'law2015',  
        key: 'law2015',  
        minWidth: 130,  
        ellipsis: true,  
        tooltip: true,  
        render: (text, record) => {  
          // 根据 cirColor 设置背景色  
          const style = {  
            backgroundColor: record.law2015Colour, // 直接使用 cirColor 的值作为背景色  
            // 如果你想添加更多的内联样式，可以在这里继续添加  
          };  
      
          // 返回带有样式的元素  
          return (  
            <div style={style}>  
              {text}  
            </div>  
          );  
        },  
      },  
      {  
        title: 'Authority conclusion (CIR-Overall)',  
        dataIndex: 'cir',  
        key: 'cir',  
        minWidth: 130,  
        ellipsis: true,  
        tooltip: true,  
        render: (text, record) => {  
          // 根据 cirColor 设置背景色  
          const style = {  
            backgroundColor: record.cirColour, // 直接使用 cirColor 的值作为背景色  
            // 如果你想添加更多的内联样式，可以在这里继续添加  
          };  
      
          // 返回带有样式的元素  
          return (  
            <div style={style}>  
              {text}  
            </div>  
          );  
        },  
      },  
      // ... 其他列定义（cir, subject, supplier, riskLevel）与上述类似  
      {  
        title: 'Safety evaluation procedure- full toxicological endpoints',  
        dataIndex: 'subject',  
        key: 'subject',  
        minWidth: 130,  
        ellipsis: true,  
        tooltip: true,  
        render: (text, record) => {  
          // 根据 cirColor 设置背景色  
          const style = {  
            backgroundColor: record.subjectColour, // 直接使用 cirColor 的值作为背景色  
            // 如果你想添加更多的内联样式，可以在这里继续添加  
          };  
      
          // 返回带有样式的元素  
          return (  
            <div style={style}>  
              {text}  
            </div>  
          );  
        },  
      }, 
      {  
        title: 'Supplier information- safety assessment related',  
        dataIndex: 'supplier',  
        key: 'supplier',  
        minWidth: 130,  
        ellipsis: true,  
        tooltip: true,  
      }, 
      {  
        title: 'Risk level',  
        dataIndex: 'riskLevel',  
        key: 'riskLevel',  
        minWidth: 130,  
        ellipsis: true,  
        tooltip: true,  
        render: (text, record) => {  
          // 根据 cirColor 设置背景色  
          const style = {  
            backgroundColor: record.riskLevelColour, // 直接使用 cirColor 的值作为背景色  
            // 如果你想添加更多的内联样式，可以在这里继续添加  
          };  
      
          // 返回带有样式的元素  
          return (  
            <div style={style}>  
              {text}  
            </div>  
          );  
        },  
      }, 
    ];

  // 计算合并单元格的 rowSpan  
  const getSpanArr =(data,dataIndex) =>{
    let spanArr=[]
    let pos = 0
    // data就是我们从后台拿到的数据
    for (var i = 0; i < data.length; i++) {
      if (i === 0) {
        spanArr.push(1);
        pos= 0;
      } else {
        // 判断当前对象的指定属性值与上一个对象的指定属性值是否相等
        if (data[i][dataIndex] === data[i - 1][dataIndex] ) {
          spanArr[pos] += 1;
          spanArr.push(0);
        } else {
          spanArr.push(1);
          pos = i;
        }
      }
    }
    console.log(spanArr,'原料序号')
    return spanArr
  }

  const handleFinish = () =>{
    const nowDate = new Date();

    const date = {

    year: nowDate.getFullYear(),

    month: nowDate.getMonth() + 1,

    date: nowDate.getDate(),

    }

    const newmonth = date.month>10?date.month+'':'0'+date.month


    const day = date.date>10?date.date+'':'0'+date.date


    const systemDate = date.year + newmonth  + day
    // downloadStatus.value=true
    download("/fm/check/exportFmCheckResult?key="+step3Data.key, {

   }, `Formula screening_${step3Data.nameCn}_${systemDate}.xlsx`);
  }


  return (  
    <>  
    <FullscreenLoading showLoading={loading} loadingTip="Loading..."/> 
    {/* 4是row，5是percentage,6是composition */}
    {/* 渲染错误提示 */}  
    <Card>
      <Table dataSource={tableData} columns={columns}  pagination={false} />  
      <Form onFinish={handleFinish} layout="vertical">
      <div style={{marginTop:'2%'}}></div>  
      <Row justify="center" align="middle">  
      <Col>  
        <Form.Item>  
        <Button type="primary" htmlType="submit"  >   
          {t('report.ExportExcel')}  
        </Button> 
        </Form.Item> 
        </Col> 
        </Row>
      </Form>
    </Card>
    </>  
  );  
};  
  
export default Step3;